<template>
	<div class="content" id="content">
		<!-- <i v-if="this.VDO" class="el-icon-video-camera" :style="{left:windowW/2+'px',top:windowH/2+'px',transform:'rotate(-90deg)'}"></i> -->
		
		<div class="box" id="ActovDiv" :style="{ transformOrigin:ChangeX+'px'+' '+ ChangeY+'px',transform:'rotate'+'('+'-'+Z+'deg)',left:200+UpY*(-1)+'px',top:200+UpX*(-1)+'px',width:ChangeX+'px',height:ChangeY+'px'}" >
			<div 
		@mousedown="down"
		@touchstart="down"
		@mousemove="move"
		@touchmove.prevent="move"
		@mouseup="end"
		@touchend="end"
		
		v-for="(item,index) in list"  :key="index" :style="{left:item.positionX+'px',top:item.positionY+'px'}"  class="div1">
			<span>{{item.id}}</span>
			<div class="garden"></div>
			
		</div>
			
		</div>
		
		 <!-- <el-button :plain="true" @click="GetObjName1" style="width: 100px; height: 25px;">更新内容</el-button>
		<button @click="start">更新内容1</button> -->
		<i v-if="this.VDO" id="VODId" class="el-icon-video-camera" :style="{left:384+'px',top:445+'px',transform:'rotate(-90deg)'}"></i>
		<div class="coordinate" :style="{top:windowH-280+'px',transform:'rotate'+'('+'-'+Z+'deg)'}" >
			<span class="spanx">X</span>
			<span class="spany">Y</span>
		</div>
		<!-- <li @mousedown="move" v-for="(item,index) in list"  :key="index" :style="{left:item.positionX+'px',top:item.positionY+'px'}"></li> -->
		
	</div>
	
</template>

<script>
export default{
	// inject:['reload'],
	data() {
	  return {
	   test:false,
	   ViewBody:[
		     'Cube',
			 'CineCameraActor'
		  //  'Sphere',
		  //  'Cylinder',
		  //  'Cone',
		  //  'Plane'
	   ],
	   objectPathname:'',
	   ObjPath:"",
	   list:[
	            
	        ],
			disX:'',
			disY:'',
			X:0,
			Y:0,
			Z:0,
			CineCameraActorpath:'',
			windowW:'',
			windowH:'',
			
		// Idon:this.SetTime	
			VDO:false,
			
			ChangeX:0,
			ChangeY:0,
			ChangeZ:0,
			SourceY:'',
			UpX:'',
			UpY:'',
			tess:'left:200px,right:200px'
			
		
	  };
	},

	mounted(){
		this.getObjectpathname();
		this.GetObjName(1);
		this.GetCineCameraActor(1);
		// setTimeout(this.GetObjName1(),50000)	
	
		this.SetTime =setInterval(this.start,100)
		
		// this.SetTimeouton()
	},
	
	destroyed() {//离开当前页面运行
		
		window.clearInterval(this.SetTime);//停止更新
	},
	// beforeRouteLeave() {
	// 	console.log(2222222222222222)
	// },
	
		
	methods:{
		
		start(){
			var that =this
			that.GetCineCameraActor(1)
			// that.GetObjName(2)
			console.log('正在刷新...')
			// console.log(this.X,this.Y)
			that.GetDivWH()
			
		},
		
		GetObjName1(){
			
			this.ClaersetTime()
				
		},
		GetObjName(n){
			
			let Array,BodyName,BodyName1,Position;
			let Array2=[]
			Array=this.objectPathname
			// console.log(Array)
			for(let i in this.ViewBody){
				
				for(let j in this.objectPathname){
					 BodyName =Array[j].match(this.ViewBody[i])
					 
					if(BodyName != null){
						
						let Text=BodyName.input
						
						let index =Text.indexOf("k")
						
						if(index >0 || Text.length>15){
							
							// console.log(Text)	
							// if(Text == 'CineCameraActor'){
								this.CineCameraActorpath=this.GetObjPath(Text)
								// console.log(this.CineCameraActorpath,'222222222222222')
							// }
							
						}else{
							Array2.push(Text)
							
							// this.GetObjPath(Text)
							
							let ReceiveObjPath =this.GetObjPath(Text)
							
							if(ReceiveObjPath != undefined){
								// console.log(222)
								this.axios.put('/remote/object/property',
									{
										"objectPath" :ReceiveObjPath+".StaticMeshComponent0",
										    "PropertyName": "RelativeLocation",
										    "access" :"READ_ACCESS"
									},{
										headers:{
											'Content-Type': 'application/json'
										}
									}
								).then(
									(res)=>{
										Position=res.data.RelativeLocation
										
										// console.log(res.data)
										// return res.data.RelativeLocation
										if(n == 1){
											this.list.push({
												id:Text,
												// positionX:res.data.RelativeLocation.Y/3,
												// positionY:res.data.RelativeLocation.X/3*(-1)
												positionX:res.data.RelativeLocation.Y/3+this.windowW/4,
												positionY:res.data.RelativeLocation.X/3*(-1)+this.windowH/4
											})
										}else if(n == 2){
											
											this.list.splice(i++,1,{
												id:Text,
												// positionX:res.data.RelativeLocation.Y/3,
												// positionY:res.data.RelativeLocation.X/3*(-1)
												positionX:res.data.RelativeLocation.Y/3+this.windowW/4,
												positionY:res.data.RelativeLocation.X/3*(-1)+this.windowH/4
											})
											
											// this.list.splice()
										}
										
										
										
									},
									(err)=>{
										
									}
								)
							}
							
							
							
							
						}
							
					}
						
				}
				
			}
		},
		GetObjposition(ReceiveObjPath){
			var Position='1';
			console.log(ReceiveObjPath)
			this.axios.put('/remote/object/property',
				{
					"objectPath" :ReceiveObjPath+".StaticMeshComponent0",
					    "PropertyName": "RelativeLocation",
					    "access" :"READ_ACCESS"
				},{
					headers:{
						'Content-Type': 'application/json'
					}
				}
			).then(
				(res)=>{
					// this.Position=res.data.RelativeLocation
					
					// return res.data.RelativeLocation
					return res
				},
				(err)=>{
					
				}
			)
			
		},
		getObjectpathname(){
			this.windowW=window.innerWidth
			// this.windowH=window.innerHeight
			// let windd=window.scrollWidth
			
			this.windowH=document.getElementById("content").parentElement.clientHeight
			// this.windowW=document.getElementById("content").clientWidth
			// let ads=document.getElementById("content").clientWidth
			
			
			console.log(this.windowH,this.windowW)
			
			let Text=this.$store.state.objectPath.ReturnValue;
							// let  value2=this.$store.state.value2
							// let Text2=this.$store.state.objectPath.ReturnValue[1];
							
							
							let Textone=Text[0]
							let IndexOfPsl=Textone.indexOf('PersistentLevel')
							
							// let IndexOfPsl2=cctv.indexOf(':')
							// let Projectsource =this.$store.state.properties;
							// let test2=Text[0].length
			let slicename=''
			let objectPathname =[]
			let inputtex2,IndexOfString2,index,inputtex,IndexOfString,i2;
			for(let i in Text){
									 inputtex=Text[i]
									 IndexOfString=inputtex.indexOf(':')
									inputtex=inputtex.slice(0,IndexOfString)
									 i2=Number(i)+1
									
									if(i2 < Text.length){
										 inputtex2=Text[i2]
										 IndexOfString2=inputtex2.indexOf(':')
										 inputtex2=inputtex2.slice(0,IndexOfString2)
									}
									if(inputtex != inputtex2 && inputtex2 !=undefined ){
										index=i
									}
									if(index == undefined || index == i ){
										slicename=Text[i].slice(IndexOfPsl+16,120)
										objectPathname.push(slicename)
									}else if(i > index){
										slicename=Text[i].slice(IndexOfString2+17,120)
										objectPathname.push(slicename)
										
									}
			}
		
			this.objectPathname=objectPathname
			
			
		},
		
		GetObjPath(name){
			let Text=this.$store.state.objectPath.ReturnValue;
			let ObjPath,ObjPath1,Slicentail;
			
			for(let i in Text){
				ObjPath=Text[i].match(name)
				let index=name.indexOf("_")
				if(index < 0 && ObjPath != null ){
					ObjPath1=ObjPath.input
					
					break
				}
				if(ObjPath != null){
					ObjPath1=ObjPath.input
					
					index=ObjPath1.indexOf('_')
					 Slicentail =ObjPath1.slice(index-4)
					if(name.length >= Slicentail.length){
						ObjPath1=ObjPath.input
						break
					}
					
				}
				
			}
			
			return ObjPath1
			
		},
		GetCineCameraActor(two){
			let json,age;
			if(two == 1){
				 json="RelativeLocation"
				
			}else{
				json=two
				
			}
			
			if(json != '' && this.CineCameraActorpath != ''){
				this.axios.put('/remote/object/property',
			{
				"objectPath" :this.CineCameraActorpath+".SceneComponent",
				    "PropertyName": json,
				    "access" :"READ_ACCESS"
			},{
				headers:{
					'Content-Type': 'application/json'
				}
			}).then(
				(res)=>{
					if(json == "RelativeLocation"){
						//400 36
						// res.data.RelativeLocation.X/2+400
					// let testX=res.data.RelativeLocation.Y/3+this.windowW/2 - this.Y
					age=this.SourceY
					// if(res.data.RelativeLocation.Y/3+this.windowW/2 != this.Y  ){
					// 	console.log(res.data.RelativeLocation.Y/3+this.windowW/2,this.Y)
					// 	// this.ChangeY=Math.round(res.data.RelativeLocation.Y/3+this.windowW/2 - this.Y) 
					// }
					// else if(res.data.RelativeLocation.X/3*(-1)+this.windowH/2-200  != this.X ){
					// 	this.ChangeX=Math.round(res.data.RelativeLocation.X/3*(-1)+this.windowH/2-200 -this.X) 
					// }
					
					this.SourceY=res.data.RelativeLocation.Y
					
						this.Calculation()
						// console.log(1)
					this.Y=res.data.RelativeLocation.Y/4+this.windowW/2
					this.X=res.data.RelativeLocation.X/4*(-1)+this.windowH/2
					// this.X=res.data.RelativeLocation.Y/3
					// this.Y=res.data.RelativeLocation.X/3*(-1)
					
					
					
					// console.log(this.ChangeY)
					
					this.GetCineCameraActor('RelativeRotation')
					
					
					}else{
						
						this.Z=res.data.RelativeRotation.Yaw
						// console.log(this.Z)
						this.VDO=true
					}
					
					
				},
				(err)=>{
					// console.log(22222)
				}
			)
				
			}
			
			
		},
		async Calculation(){
			let ActovDiv=document.getElementById("ActovDiv").style.left
			let ActovDiv2=document.getElementById("ActovDiv").style.top
			// console.log(ActovDiv,ActovDiv2)
			// let indexofActdiv= ActovDiv.indexOf('px')
			let indexofActdiv= parseInt(ActovDiv)
			// let sliceActdiv=ActovDiv.slice(0,indexofActdiv)
			
			let indexofActdiv2=parseInt(ActovDiv2) 
			
			
			
			this.ChangeX=Math.round(this.X-indexofActdiv2)
			this.ChangeY=Math.round(this.Y-indexofActdiv)
			// console.log(this.ChangeX,this.ChangeY,this.X,this.Y)
			console.log(this.X,this.Y)
			
		},
		GetDivWH(){
			let ActovDiv=document.getElementById("ActovDiv").style.left
			
			this.UpX=Math.floor(this.X-445)*1.2
			this.UpY=Math.floor(this.Y-384)*1.2
			let jioadu=(this.Z+90)*0.017453293
			let Cos=Math.round(Math.cos(jioadu)*1000)/1000
			let Sin=Math.round(Math.sin(jioadu)*1000)/1000
			let a=this.X*Cos - this.Y*Sin
			let b=this.Y*Cos + this.X*Sin
			// console.log(this.X,this.Y,this.UpX,this.UpY)
			// console.log(ActovDiv)
			// console.log(Cos,Sin,this.Y,this.X,jioadu,a,b)
			
		},
		 down(e) {
		      // this.flags = true; //是否开启拖拽
		      // var touch;
		      // if (event.touches) {
		      //   touch = event.touches[0];
		      // } else {
		      //   touch = event;
		      // }
		      // this.position.x = touch.clientX;
		      // this.position.y = touch.clientY;
		      // this.dx = moveDiv.offsetLeft;
		      // this.dy = moveDiv.offsetTop;
			  let odiv = e.target;        //获取目标元素
			  // console.log(odiv)
			  // //算出鼠标相对元素的位置
			  this.disX = e.clientX - odiv.offsetLeft;
			  this.disY = e.clientY - odiv.offsetTop;
			  console.log(this.disX,this.disY)
			  console.log(odiv.offsetLeft,odiv.offsetTop)
		    },
		
		 move(e){
		            let odiv = e.target;        //获取目标元素
		            console.log(odiv)
		            // //算出鼠标相对元素的位置
		            // let disX = e.clientX - odiv.offsetLeft;
		            // let disY = e.clientY - odiv.offsetTop;
		            // document.onmousemove = (e)=>{       //鼠标按下并移动的事件
		            //     //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
		                let left = e.clientX - this.disX;    
		                let top = e.clientY - this.disY;
		                
		                //绑定元素位置到positionX和positionY上面
		                this.positionX = top;
		                this.positionY = left;
		                
		                //移动当前元素
		                odiv.style.left = left + 'px';
		                odiv.style.top = top + 'px';
		            // };
		            // document.onmouseup = (e) => {
		            //     document.onmousemove = null;
		            //     document.onmouseup = null;
		            // };
					
					console.log("2",left,top)
					
		        },
		end(e){
			// console.log('3',e)
		}
		
	}











}	
</script>

<style scoped>
	
	* {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	.content{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.box{
	 /* width: 370px;
	  height: 300px; */
	  position: absolute;
	  background-color: blue;
	 
	  /* transform:rotate(150deg) ; */
	  /* left: 300px;
	  top: 300px; */
	 
	  
	  
	}
	.div1{
	    position: absolute;
	    top: 100px;
	    left: 100px;
	    
	    /* cursor: move; */
		
		
		
	}
.div1 span{
	color: #F0F8FF;
	font-size: 12px;
	
}
.garden{
	width: 15px;
	height: 15px;
	background-color: #00FFFF;
	border-radius: 20px;
}
.el-icon-video-camera{
	color: red;
	position: absolute;
	font-size: 40px;
	
	
}
.el-icon-top{
	color: #FFFFFF;
	font-size: 40px;
	
}
.coordinate{
	position: relative;
	width: 40px;
	height: 40px;
	border-left: 2px solid red;
	border-bottom: 2px solid green;
	left: 50px;
	transform:rotate(45deg) ;
	
}
.spanx{
	position: absolute;
	color: red;
	left: 2px;
	top: 0px;
	font-size:12px;
}
.spany{
	position: absolute;
	color: green;
	top: 25px;
	font-size:14px;
	right: 0px;
}

</style>
